<template>
	<view class="content">
		<!--tips提示-->
		<tipsBox></tipsBox>
		<view class="container">
			<!--放置组件-->
			<view class="campus">
				<!--功能区-->
				<view class="parent">
					<!--卡片式轮播图-->
					<u-swiper 
						:list="swiperList" 
						previousMargin="35" 
						nextMargin="35" 
						circular 
						:autoplay="false" 
						radius="5"
						bgColor="#ffffff"
						height="200"
					>
					</u-swiper>
				</view>
				<view class="market" @click="linkPage('')">
					<view class="market-back">
						<image class="img" src="https://yj.xiesinder.cn/prophet/svg/right-back.svg" mode="scaleToFill"
							lazy-load="true"></image>
					</view>
					<view class="market-text">
						枯木树洞
					</view>
				</view>
			</view>
			<!--数据区-->
			<view class="data-area">
				<u-tabs :list="tabList" lineWidth="40" scrollable="true" @click="handleTabs"></u-tabs>
				<!--数据-->
				<block v-if="loginState">
					<!--考试安排 临时-->
					<!--
					<view class="my-exam" v-show="tabsIndex == 0">
						<scroll-view scroll-y="true" style="height: 52vh;overflow: auto;-webkit-overflow-scrolling: touch">
							<view class="info-list">
								<view v-if="myExamData.length == 0" style="width: 100%;">
									<u-empty text="暂时没有考试信息,确认账号密码是否正确,点击下方按钮同步"
										icon="https://cdn.uviewui.com/uview/empty/data.png">
									</u-empty>
									<view class="btn" style="width: 40%;margin-left: 30%;margin-top: 20rpx;">
										<u-button type="primary" text="立即同步" size="normal" @click="syncJwglMyExam()"></u-button>
									</view>
								</view>
								<block v-else>
									<view class="item" v-for="(item, index) in myExamData" :key="index">
										<view class="item-title left">{{ item.kcmc }}考试</view>
										<view class="item-grid">
											<view class="left">
												</br>
												<text>考试日期：{{ item.ksrq }}</text></br>
												<text>考试时间：{{ item.kssj }}</text></br>
												<text>第{{ item.dyzc }}周({{ item.dyxq }})，{{ item.zyjc }}节</text>
											</view>
											<view class="right">
												</br>
												<text style="color: #a8aa22;">考试场地</text></br>
												<text
													style="color: #00aa00;font-size: 35rpx;">{{ item.jxcdmc }}</text></br>
											</view>
										</view>
									</view>
									<view class="item" style="height: 40rpx;width: 40%;margin-left: 30%;margin-top: 20rpx;">
										<u-button type="primary" text="同步考试安排" size="normal" @click="syncJwglMyExam()"></u-button>
									</view>
								</block>
							</view>
						</scroll-view>
					</view>
					-->
					<!--今日课表-->
					<view class="schedule" v-show="tabsIndex == 0">
						<!--局部滚动-->
						<scroll-view scroll-y="true"
							style="height: 52vh;overflow: auto;-webkit-overflow-scrolling: touch">
							<view class="info-list">
								<view v-if="todaySchedule.length == 0" style="width: 100%;">
									<u-empty text="今日无课,可以出去看看阳光喔..."
										icon="https://cdn.uviewui.com/uview/empty/order.png">
									</u-empty>
								</view>
								<block v-else>
									<view class="item" v-for="(item, index) in todaySchedule" :key="index"
										@click="toSchedule" :style="{borderLeft: '8rpx solid ' + item.bgColor}">
										<view class="text-left">
											<view style="width: 100% ;color: #000; font-weight: bold; font-size: 30rpx;
												display: inline-block;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;">{{item.kcmc}}</view>
											</br>
											<text>第{{item.jcdm2}}节 {{item.kccxsj}}</text></br>
											<text>{{item.teaxms}}</text>
										</view>
										<view class="text-right">
											<text>{{item.jxcdmc}}</text>
										</view>
									</view>
								</block>
							</view>
						</scroll-view>
					</view>
					<!--树洞-->
					<view class="tree-hole" v-show="tabsIndex == 1">
						<!--局部滚动-->
						<scroll-view scroll-y="true"
							style="height: 52vh;overflow: auto;-webkit-overflow-scrolling: touch">
							<view class="info-list">
								<view v-if="treeHoleData.length == 0" style="width: 100%;">
									<u-empty text="快来分享你的故事吧!" icon="https://cdn.uviewui.com/uview/empty/data.png">
									</u-empty>
									<view class="btn" style="width: 40%;margin-left: 30%;margin-top: 20rpx;">
										<u-button type="primary" text="立即分享" size="normal"
											@click="linkPage('')"></u-button>
									</view>
								</view>
								<block v-else>
									有数据
								</block>
							</view>
						</scroll-view>
					</view>
				</block>
				<u-divider v-else text="请先移步登录" textPosition="center" textColor="#6495d5"
					lineColor="#98bfeb"></u-divider>
			</view>
		</view>
		<!--全局弹窗-->
		<login-popup v-if="modalShow"></login-popup>
	</view>
</template>

<script>
	// 顶部提示
	import tipsBox from '@/components/tips-box/tips-box.vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		getTodayScheduleList
	} from "@/plugins/api/scheduleApi.js"
	import {
		// synMyExamData,
		// getJwglMyExam
	} from "@/plugins/api/jwglExamApi.js"
	export default {
		components: {
			tipsBox
		},
		data() {
			return {
				// 轮播图图片
				swiperList: [
					'https://yj.xiesinder.cn/prophet/index_swiper/1.jpg',
					'https://yj.xiesinder.cn/prophet/index_swiper/2.jpg',
					'https://yj.xiesinder.cn/prophet/index_swiper/3.jpg',
					'https://yj.xiesinder.cn/prophet/index_swiper/4.jpg',
					'https://yj.xiesinder.cn/prophet/index_swiper/5.jpg',
					'https://yj.xiesinder.cn/prophet/index_swiper/6.jpg',
					'https://yj.xiesinder.cn/prophet/index_swiper/7.jpg',
					'https://yj.xiesinder.cn/prophet/index_swiper/8.jpg',
					'https://yj.xiesinder.cn/prophet/index_swiper/9.jpg',
					'https://yj.xiesinder.cn/prophet/index_swiper/10.jpg'
				],
				// 滚动菜单
				tabList: [
					// {
					// 	name: '考试安排'
					// },
					{
						name: '今日课表'
					},
					{
						// 想要成为住在树洞里的刺猬
						// 愿意倾听你所有的喜怒哀乐
						// 那些不能 无法与人分享的故事
						// 都可以告诉我
						// 我不能改变什么
						// 唯一能做的是接受你的情绪
						name: '枯木树洞'
					}
				],
				tabsIndex: 0, // 滚动菜单index，默认为0 = 今日课表
				myExamData: [], // 考试安排
				todaySchedule: [], // 今日课表
				treeHoleData: [], // 树洞数据
			}
		},
		onLoad() {},
		onShow() {
			this.getTodayScheduleData()
			// 考试安排
			// this.getJwglMyExamData()
		},
		// 计算属性
		computed: {
			...mapState('user', ['modalShow', 'openId', 'userInfo', 'loginState', 'isJwgl'])
		},
		watch: {
			openId() {
				this.getTodayScheduleData()
				// 考试安排
				// this.getJwglMyExamData()
			}
		},
		methods: {
			...mapActions('user', ['openIsJwglAction', 'closeIsJwglAction']),
			// tabs菜单选择
			handleTabs(item) {
				this.tabsIndex = item.index
			},
			// 加载今日课程数据
			async getTodayScheduleData() {
				await getTodayScheduleList({
					openId: this.openId
				}).then(res => {
					if (res.data.data == null) {
						this.todaySchedule = []
					} else {
						this.todaySchedule = res.data.data
					}
				}).catch(err => {
					this.$u.toast(err.data.msg)
				})
			},
			// 同步考试安排数据
			// async syncJwglMyExam() {
			// 	// 判断是否有链接正在执行
			// 	if (!this.isJwgl) {
			// 		uni.$u.toast('存在数据正在同步，别着急喔！')
			// 		return;
			// 	}
			// 	uni.$u.toast('数据同步中')
			// 	await synMyExamData({
			// 		openId: this.openId,
			// 		sign: 'sinder@1021'
			// 	}).then(res => {
			// 		if (res.data.status == 0) {
			// 			// 成功
			// 			uni.$u.toast(res.data.msg)
			// 			// 重新获取数据
			// 			this.getJwglMyExamData()
			// 		} else {
			// 			// 失败
			// 			uni.$u.toast(res.data.msg)
			// 		}
			// 	}).catch(err => {
			// 		uni.$u.toast(err.data.msg)
			// 	})
			// },
			// 加载考试安排数据
			// 跳转页面
			linkPage(src) {
				if (src == '') {
					uni.$u.toast('敬请期待')
				} else {
					// 跳转页面
					this.$navTo(src)
				}
			},
			// 跳转课表页面
			toSchedule() {
				uni.switchTab({
					url: '/pages/index/schedule'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f8f8f8;
	}

	.content {
		width: 100%;
		height: auto;

		.container {
			position: fixed; // 相对于浏览器
			z-index: 3;
			margin: 0rpx;
			width: 100%;
			height: 100%;
			background: #f8f8f8;

			.campus {
				width: 96%;
				height: 525rpx;
				margin: 0rpx 2%;
				background-color: #ffffff;
				box-shadow: 0 5rpx 8rpx 0 #f3f3f3, 0 6rpx 15rpx 0 #f3f3f3;

				//  轮播图
				.parent {
					width: 94%;
					height: 200px;
					margin: 15rpx 3% 15rpx 3%;
					border-bottom: 5rpx #f3f3f3 solid;
				}

				.market {
					width: 92%;
					height: 100rpx;
					margin: 20rpx 4% 0rpx 4%;
					background-color: #ffffff;

					.market-back {
						float: left;
						width: 40%;
						height: 100rpx;
						margin-left: 15%;

						.img {
							width: 100%;
							height: 100rpx;
						}
					}

					.market-text {
						float: left;
						width: 30%;
						height: 100rpx;
						margin-left: -10%;
						color: #27C0EA;
						font-size: 40rpx;
						font-family: cursive;
						font-weight: bold;
						text-align: center;
						line-height: 100rpx;
					}
				}
			}


			.data-area {
				width: 96%;
				height: 90rpx;
				margin: 20rpx 2%;
				background-color: #ffffff;
				box-shadow: 0 5rpx 8rpx 0 #f3f3f3, 0 6rpx 15rpx 0 #f3f3f3;
			}

			// 今日课表
			.schedule {
				width: 100%;
				height: 60vh;
				margin-bottom: 30rpx;

				.info-list {
					width: 100%;
					height: 60vh;
					background: #FFFFFF;

					.item {
						margin: 0 auto;
						margin: 10rpx 5% 0 0%;
						background: #fff;
						width: 100%;
						height: 150rpx;
						line-height: 38rpx;
						color: #656363;
						border-bottom: 1rpx solid #ececec;

						.text-left {
							float: left;
							text-align: left;
							width: 68%;
							height: 150rpx;
							margin-left: 1%;
							font-size: 25rpx;
							line-height: 40rpx;
						}

						.text-right {
							float: left;
							width: 30%;
							height: 150rpx;
							text-align: center;
							line-height: 60rpx;
							font-size: 32rpx;
						}
					}
				}
			}

			// 考试安排
			.my-exam {
				width: 100%;
				height: 60vh;
				margin-bottom: 30rpx;

				.info-list {
					width: 100%;
					height: 60vh;
					background: #FFFFFF;

					.item {
						float: left;
						width: 90%;
						height: 250rpx;
						margin: 30rpx 5% 0 5%;
						background: #4fadff;
						border-radius: 15rpx;
						box-shadow: 0 5rpx 5rpx 0 rgba(73, 192, 255, 0.2), 0 5rpx 5rpx 0 rgba(73, 192, 255, 0.2);

						.item-title {
							width: 100%;
							height: 40rpx;
							font-size: 30rpx;
						}

						.left {
							float: left;
							width: 100%;
							height: 40rpx;
							color: #fff;
							text-align: left;
							text-indent: 25rpx; // 文本缩进
							white-space: nowrap;
						}

						.item-grid {
							float: left;
							width: 96%;
							height: 190rpx;
							margin-top: 10rpx;
							margin-bottom: 10rpx;
							margin-left: 2%;
							background: #fff;
							border-radius: 15rpx;

							.left {
								float: left;
								width: 69%;
								height: 190rpx;
								font-size: 30rpx;
								text-align: left;
								text-indent: 30rpx;
								color: #53acff;
								line-height: 60rpx;
								padding-left: 1%;
							}

							.right {
								float: left;
								width: 29%;
								height: 190rpx;
								font-size: 30rpx;
								text-align: left;
								text-indent: 30rpx;
								color: #53acff;
								line-height: 60rpx;
								padding-left: 1%;
							}
						}
					}
				}
			}

			// 刺猬树洞
			.tree-hole {
				width: 100%;
				height: 60vh;
				margin-bottom: 30rpx;
			}
		}
	}
</style>